<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型</title>
</head>
<body>

    <!-- 盒子模型
    默认： content-box
           border-box
    -->
    <!-- <div class="frame">
        <div class="canvas">
          <div class="one"></div>
        </div>
      </div> -->

      <div class="div1">11</div>
      <span>Lorem ipsu</span>

      <style>

        /* padding元素不能为负数,
         行内元素左右内边距没问题，上下内边距不能完美的设置
         对于行内元素来说，左右的margin是可以设置的，上下的margin是不能设置的
         margin:0 auto  auto属性可以设置元素左右居中
         margin可以是负值 
        */

        /* 子元素的margin 是参考父元素的content计算的 */
        /* 盒子设置颜色是内容和padding一起设置的 */
div.div1{
  width: 400px;
  height: 400px;
  background-color: red;
  padding: 40px;
  margin: 40px;
  /* border-left-width: 10px;
  border-color: red;
  border-style: solid;
  border-left: 10px red solid;
  margin:0 auto; */
}

.frame {
  border: 50px solid black;
  width: 500px;
  padding: 50px;
  margin: 20px auto;
}

/* 高度塌陷
父组件清浮动
*/
        .canvas {
  width: 500px;
  height: 600px;
  background-color: #4d0f00;
  /* padding: 1px; */
  /* overflow:hidden; */
        }


.one {
  width: 425px;
  height: 150px;
  background-color: #efb762;
  margin: 20px auto;
}
      </style>
</body>
</html>